<template>
  <el-drawer class="drawerView" :size="column * 300 + 40 + 'px'" :title="title" :visible.sync="innerVisible" append-to-body modal-append-to-body direction="rtl">
    <div class="drawerContainer">
      <div class="drawerMain">
        <div class="formView">
          <div class="drawerTitle">
            <h5>{{ formTitle }}</h5>
            <div class="tabs">
              <el-button plain size="mini" :class="{ tabItem: true, curr: column === 4 }" @click="column = 4">||||</el-button>
              <el-button plain size="mini" :class="{ tabItem: true, curr: column === 3 }" @click="column = 3">|||</el-button>
              <el-button plain size="mini" :class="{ tabItem: true, curr: column === 2 }" @click="column = 2">||</el-button>
            </div>
          </div>
        </div>
        <slot :column="column" name="form" />
        <!-- <slot name="table" /> -->
      </div>
      <div class="footer">
        <el-button type="primary" size="medium">保存</el-button>
        <el-button plain size="medium">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  name: 'DrawerWrap',
  components: {},
  props: {
    tableTitles: {
      type: Array,
      require: false,
      default: () => [],
    },
    visible: {
      type: Boolean,
      require: true,
      default: false,
    },
    formTitle: String,
    type: {
      type: String,
      require: true,
      default: 'view',
    },
  },
  data() {
    return {
      column: 2,
    }
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('update:visible', val)
      },
    },
    title() {
      const type = this.type
      let title = '查看'
      if (type) {
        switch (type) {
          case 'viwe':
            title = '查看'
            break
          case 'edit':
            title = '编辑'
            break
          case 'add':
            title = '新增'
            break
        }
      }
      return title
    },
  },
  mounted: function() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.drawerContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .drawerMain {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px;
  }
  .footer {
    border-top: 1px solid #eff0f3;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
